import React, { Component } from 'react'
import { Icon, Picker, List } from 'antd-mobile'

export default class GiftCouponV4 extends Component {
  render() {
    return (
      <div className={`rt-gift-coupon-v4-container`}>
        <div className={`-top-nav-header`}>
          <Icon type="left" />
          <span>赠券</span>
        </div>
        <div className={`-info-box`}>
          <span>赠券余额：800.00</span>
          <span className={`-diff`}>使用规则</span>
        </div>
        <div className={`cm-scrollable-container`}>
          <div className={`-row-box`}>
            <div className={`-half-box`}>
              <section className={`-above`}>
                <span>新用户注册赠券</span>
                <span className={`-expired`}>有效期至 2016年6月30日</span>
              </section>
              <section className={`-below`}>
                <div className={`-wrapper`}>
                  <span className={`-rmb`}>¥</span>
                  <span className={`-money`}>100.00</span>
                </div>
              </section>
            </div>
            <div className={`-half-box`}>
              <section className={`-above`}>
                <span>新用户注册赠券</span>
                <span className={`-expired`}>有效期至 2016年6月30日</span>
              </section>
              <section className={`-below`}>
                <div className={`-wrapper`}>
                  <span className={`-rmb`}>¥</span>
                  <span className={`-money`}>100.00</span>
                </div>
              </section>
            </div>
          </div>

          <div className={`-row-box -inaction`}>
            <div className={`-half-box`}>
              <section className={`-above`}>
                <span>新用户注册赠券</span>
                <span className={`-expired`}>有效期至 2016年6月30日</span>
              </section>
              <section className={`-below`}>
                <div className={`-wrapper`}>
                  <span className={`-rmb`}>¥</span>
                  <span className={`-money`}>100.00</span>
                </div>
              </section>
            </div>
            <div className={`-half-box`}>
              <section className={`-above`}>
                <span>新用户注册赠券</span>
                <span className={`-expired`}>有效期至 2016年6月30日</span>
              </section>
              <section className={`-below`}>
                <div className={`-wrapper`}>
                  <span className={`-rmb`}>¥</span>
                  <span className={`-money`}>100.00</span>
                </div>
              </section>
            </div>
          </div>

          <Picker
            cols={1}
            extra="选择银行"
          >
            <List.Item
              className={`cm-picker-box`}
            >
              <Icon type="caret-down" />
            </List.Item>
          </Picker>
        </div>
      </div>
    )
  }
}